import React from 'react'
import { MonitorOverview } from '@/types/monitor'

interface BrokerDetailsProps {
  overview: MonitorOverview | null
}

export default function BrokerDetails({ overview }: BrokerDetailsProps) {
  if (!overview || !overview.cluster_info.brokers.length) {
    return null
  }

  return (
    <div className="mt-6 bg-white rounded-lg shadow-sm border">
      <div className="p-6 border-b">
        <h3 className="text-lg font-semibold">Broker详情</h3>
        <p className="text-sm text-gray-600">集群中所有Broker的详细信息</p>
      </div>
      <div className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {overview.cluster_info.brokers.map((broker) => (
            <div key={broker.id} className="border rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <span className="font-semibold">Broker {broker.id}</span>
                <span className={`px-2 py-1 rounded text-xs ${
                  broker.id === overview.cluster_info.controller_id
                    ? 'bg-blue-100 text-blue-800'
                    : 'bg-gray-100 text-gray-800'
                }`}>
                  {broker.id === overview.cluster_info.controller_id ? 'Controller' : 'Follower'}
                </span>
              </div>
              <div className="text-sm text-gray-600">
                <div>地址: {broker.host}:{broker.port}</div>
                {broker.rack && <div>机架: {broker.rack}</div>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
